<template>
	<div class="result-with-ocr">
		<div v-if="resultKeys.length !== 0" class="result-container">
			<p>{{ label }}</p>
			<ul>
				<li v-for="item in resultKeys" :key="item.key">
					<span class="label">{{ `${item.label}:` }}</span>
					<span>{{ item.value ? item.value : '--' }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: () => ''
		},
		resultKeys: {
			type: Array,
			default: () => []
		}
	},

	data() {
		return {};
	}
};
</script>

<style lang="less" scoped>
.result-with-ocr {
	.ocr-label {
		display: inline-block;
		line-height: 28px;
		width: 150px;
	}
}
.result-container {
	padding: 10px 60px 10px 20px;
	ul {
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
	}

	ul > li {
		line-height: 28px;
	}
}
</style>
